import React, { useEffect, useState, useRef } from 'react';
import { Modal, Space, Button, Tabs, Form, Table, Card } from 'dw-mx';
import { useSewTask } from 'dw-mx-sew';
import { request } from 'dw-mx-request';
import { StringCell } from 'dw-mx-table';

export default function TaskInfo(props) {
    const { Column } = Table;
    // 流程任务
    const sewTask = useSewTask();
    const processVars = sewTask.getProcessVars();

    const [tableData, setTableData] = useState([]);

    useEffect(() => {
        initTableData();
    }, []);

    const initTableData = async () => {
        const result = await request('/mx/SEWEngine/getTaskList', { piid: processVars.getPiid() });
        setTableData(result.result_message.tasklist);
    };

    const callback = async () => {};

    const columns = [
        {
            title: '活动',
            dataIndex: 'isrun',
        },
        {
            title: '任务名称',
            dataIndex: 'tname',
        },
        {
            title: '完成人',
            dataIndex: 'completename',
        },
        {
            title: '完成时间',
            dataIndex: 'tetime',
        },
    ];

    const tabPagination = {
        pageSize: 5,
        showQuickJumper: true,
    };

    return tableData ? (
        <>
            <div style={{ height: 550 }}>
                <Table rowKey={'tid'} dataSource={tableData} scroll={{ x: 250, y: 300 }} pagination={tabPagination} bordered>
                    <Column
                        ellipsis={true}
                        title="活动"
                        dataIndex="isrun"
                        key="isrun"
                        align={'center'}
                        width={120}
                        render={(value, record, index) => {
                            return <StringCell value={value} align={'center'} />;
                        }}
                    />
                    <Column
                        ellipsis={true}
                        title="任务名称"
                        dataIndex="tname"
                        key="tname"
                        align={'center'}
                        width={120}
                        render={(value, record, index) => {
                            return <StringCell value={value} align={'center'} />;
                        }}
                    />
                    <Column
                        ellipsis={true}
                        title="完成人"
                        dataIndex="completename"
                        key="completename"
                        align={'center'}
                        width={120}
                        render={(value, record, index) => {
                            return <StringCell value={value} align={'center'} />;
                        }}
                    />
                    <Column
                        ellipsis={true}
                        title="完成时间"
                        dataIndex="tetime"
                        key="tetime"
                        align={'center'}
                        width={120}
                        render={(value, record, index) => {
                            return <StringCell value={value} align={'center'} />;
                        }}
                    />
                </Table>
            </div>
        </>
    ) : (
        <div style={{ height: 550 }}>
            <div>Loading......</div>
        </div>
    );
}
